<template>
    <div>
        <van-field
                readonly
                v-model="selected"
                :name="name"
                :required="required"
                :label="label"
                :placeholder="placeholder"
                :border="border"
                :rules="selectRule"
                @click="openSelection">
        </van-field>

        <div :id="containerId" style="width: 100%" class="user-select-ty"></div>
        <van-popup v-model="show" bind:close="onClose" :get-container="getContainer">
            <select-users ref="selectUserRef" @back="()=>show=false" @ok="getSelectedUsers" :syncFlow="syncFlow"></select-users>
        </van-popup>
    </div>
</template>

<script>

  import SelectUsers from '@/components/SelectUsers'
  import { getAction } from "@/api";

  export default {
    name: "AppUserSelect",
    components:{
      SelectUsers
    },
    props:{
      display:{
        type:String,
        default:'inline-block',
        required:false
      },
      name:{
        type:String,
        default:'',
        required:false
      },
      required:{
        type:Boolean,
        default:false,
        required:false
      },
      label:{
        type:String,
        default:'',
        required:false
      },
      placeholder:{
        type:String,
        default:'请选择',
        required:false
      },
      border:{
        type:Boolean,
        default:false,
        required:false
      },


      value:{
        type:String,
        required:false
      },
      syncFlow:{
        type: Boolean,
        default: false,
        required: false
      }

    },
    data(){
      return {
        selected:'',
        containerId:'',
        show:false
      }
    },
    watch:{
      value:{
        immediate:true,
        handler(val){
          if(!val){
            this.selected = ''
          }else{
            this.loadItemByUsername(val)
          }
        }
      }
    },
    created(){
      this.initContainerId();
    },
    computed:{
      selectRule(){
        if(this.required===true){
          return [{ required: true, message: `请选择${this.label}`}]
        }else{
          return [];
        }
      }
    },
    methods:{
      openSelection(){
        this.show = true
        this.$nextTick(()=>{
          this.$refs.selectUserRef.clearAll(99)
          this.$refs.selectUserRef.selectUser(this.value)
        })
      },
      onClose(){
        this.show = false;
      },
      initContainerId(){
        this.containerId = 'msty'+new Date().getTime();
      },
      getContainer(){
        return document.getElementById(this.containerId)
      },
      getSelectedUsers(userList){
        let arr1 = [];
        let arr2 = [];
        for(let item of userList){
          arr1.push(item.username);
          arr2.push(item.realname);
        }
        this.selected = arr2.join(',')
        this.$emit('change',arr1.join(','))
        this.show = false
      },
      loadItemByUsername(username){
        getAction('/sys/user/appUserList',{username:username}).then(res=>{
          if(res.success){
              let rec=res.result.records;
              if(rec!=null&&rec.length>0){
                  let realnames=[];
                  rec.forEach(user => {
                      realnames.push(user['realname'])
                  })
                  this.selected = realnames.join(",");
              }
          }
        })
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    }

  }
</script>

<style>
    .user-select-ty .van-popup{width:100%;height: 100%;}
</style>